<template>
  <div class="wh-digitizing" :class="{ active, out: !active }">
    <div class="wrapper-right">
      <h3 class="fs48">双语文档智能管理</h3>
      <p class="fs48 mb40">协助搭建数字化内容中心</p>
      <ul>
        <li class="mb30">文档管理与应用一体化；文件夹嵌套还原、存储管理、分发共享、权限管理、在线预览</li>
        <li>节省<span>30%</span>管理成本，员工效率提升<span>100%</span></li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'effectCount',
  props: {
    active: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

.wh-digitizing {
  width: 100%;
  height: 100vh;
  padding-left: calc(50vw + 50px);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &.active {
    .wrapper-left .left ul li {
      &:first-of-type {
        > .progress {
          background-color: #2185fd;
          width: 344px !important;
        }
      }
    }

    > .wrapper-left > .update-bottom > .btn > ul {
      animation: digitizing-close 3s 0.3s forwards !important;

      > li {
        @for $i from 1 through 4 {
          &:nth-of-type(#{$i}) {
            animation: digitizing-select 1s 0.5s * $i;
          }
        }
      }
    }

    > .wrapper-left > .update-bottom .file {
      > img {
        @for $i from 1 through 3 {
          &:nth-of-type(#{$i}) {
            opacity: 1;
            transition: all 1s 0.1s + ($i * 0.1s);
            transform: scale(1);
          }
        }
      }
    }

    > .wrapper-right {
      h3,
      p,
      > ul > li {
        transform: translateY(0);
        opacity: 1;
      }

      h3 {
        transition: all 1s 0.1s $cubic;
      }

      p {
        transition: all 1s 0.2s $cubic;
      }

      > ul > li {
        transition: all 1s 0.3s $cubic;
      }
    }
  }

  &.out {
    > .wrapper-right {
      h3,
      p,
      > ul > li {
        transform: translateY(40px);
        opacity: 0;
      }

      h3 {
        transition: all 1s 0.3s $cubic;
      }

      p {
        transition: all 1s 0.2s $cubic;
      }

      > ul > li {
        transition: all 1s 0.1s $cubic;
      }
    }
  }

  > .wrapper-left {
    margin-right: 150px;

    > .update-top {
      width: 592px;
      height: 249px;
      background: linear-gradient(0deg, #4b84fb 0%, #205fe0 100%);
      border-radius: 20px 20px 0 0;
      padding: 30px 36px 0 32px;
      box-sizing: border-box;

      > .inner {
        height: 100%;
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 20px 20px 0 0;

        > .update-file {
          width: calc(100% - 21px * 2);
          height: 160px;
          box-sizing: border-box;
          background-color: #ffffff;
          border-radius: 12px;
          margin: 22px 21px 0 21px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          > img {
            height: 42px;
            object-fit: contain;
          }

          > .update-btn {
            margin-top: 20px;
            width: 90px;
            min-width: 90px;
            height: 30px;
            min-height: 30px;
            color: #fff;
            display: flex;
            align-items: center;

            > span {
              font-size: 10px;
              display: inline-flex;
              width: 65px;
              height: 100%;
              justify-content: center;
              align-items: center;
              background-color: #4b9fff;
              border-radius: 4px 0 0 4px;
            }

            > em {
              display: inline-block;
              width: 25px;
              height: 100%;
              background-color: #1181ff;
              border-radius: 0 4px 4px 0;
            }
          }
        }
      }
    }

    > .update-bottom {
      width: 593px;
      height: 336px;
      background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
      border-radius: 0 0 20px 20px;
      box-sizing: border-box;
      padding: 25px 36px 0;
      display: flex;
      justify-content: space-between;

      > .left {
        width: 390px;

        > ul {
          > li {
            margin-bottom: 26px;
            display: flex;
            align-items: center;

            &:first-of-type {
              > .progress {
                width: 0;
              }
            }

            > img {
              width: 30px;
              height: 30px;
              object-fit: contain;
              margin-right: 14px;

              &.ac {
                height: 23px;
              }
            }

            > .progress {
              width: 344px;
              height: 14px;
              border-radius: 7px;
              background-color: #e4f3f9;
              transition: all 1s 0.3s;
            }
          }
        }

        > .file {
          > img {
            opacity: 0;
            width: 82px;
            height: 82px;
            object-fit: contain;
            transform-origin: right bottom;
            transform: scale(0);
          }
        }
      }

      > .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        width: 80px;
        height: 35px;
        background: #2185fd;
        border-radius: 6px;
        position: relative;

        > ul {
          transform-origin: center top;
          transform: scaleY(0);
          position: absolute;
          right: 0;
          top: 100%;
          background-color: #fff;
          width: 174px;
          border-radius: 10px;
          overflow: hidden;
          transition: all 1s;

          > li {
            padding-left: 21px;
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            font-weight: 400;
            color: #324153;
            cursor: pointer;
          }
        }
      }
    }
  }

  > .wrapper-right {
    height: 350px;

    h3,
    p {
      transform: translateY(40px);
      opacity: 0;
    }

    > ul {
      > li {
        padding-left: 30px;
        width: 459px;
        font-size: 24px;
        font-weight: 100;
        color: #6c7e94;
        line-height: 40px;
        position: relative;
        transform: translateY(40px);
        opacity: 0;

        &::after {
          content: '';
          position: absolute;
          top: 10px;
          left: 0;
          width: 16px;
          height: 16px;
          border-radius: 8px;
          background-color: #2c8fff;
        }

        > span {
          display: inline-block;
          height: 34px;
          line-height: 34px;
          padding: 0 5px;
          color: #fff;
          background-color: #2185fd;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
